<template>
    <div class="home">
        <div class="img-check-box">
            <img src="@/assets/motuo.png" alt="">
            <WorkSpaceContainer 
                ref="WorkSpaceContainerRef" 
                :state="initState" :deleteAnnotation="deleteAnnotation"
                :updateState="updateState" :drawShapeEnd="drawShapeEnd"
                class="work-container"
                >
            </WorkSpaceContainer>
        </div>
        <a-button type="primary" @click="deleteAnnotation">删除</a-button>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import WorkSpaceContainer from "./workSpaceContainer.vue";
import {
    noop,
    generateBbox,
    generateUuid,
    remove,
} from "@/utils";
let initState = reactive({
    shapes: [],
    annotations: [],
    annotationType: [],
    history: [],
    currentAnnotationId: "",
});

const WorkSpaceContainerRef = ref()
const deleteAnnotation = () => {
    var { shapes } = initState;
    const removedIndex = findIndex(initState.currentAnnotationId, shapes);
    if (removedIndex != undefined) {
        const removedlist = shapes.splice(removedIndex, 1);
        updateState({
            [annotationType]: shapes,
            currentAnnotationId: "",
            history: shapes
        });
        WorkSpaceContainerRef.value.removeData(initState.shapes);
    }

};

// 改造标注数据
//  const transformShape = (raw) => {
//   return isSegmentation ? mapPolygon(raw) : mapBrushToBbox(raw);
// };
const findIndex = (id: any, data: any) => {
    var getId;
    data.map((item: any, index: number) => {
        if (item.id === id) {
            getId = index;
        }
    });
    return getId;
};
// 视频代码
// 根据异步结果更新状态
const updateState = (params: any, callback = noop) => {
    // 区分函数式更新和对象更新
    if (typeof params === "function") {
        const next = params(initState);
        Object.assign(initState, next);
        callback(initState);
        return;
    }
    // 普通更新
    Object.assign(initState, params);
    callback(initState);
};
const annotationType = "shapes";
const drawShapeEnd = (shape: any) => {
    // const shapeInfo = isSegmentation
    //   ? { points: shape.points }
    //   : { bbox: generateBbox(shape) };
    const shapeInfo = { points: shape.points };
    const rawAnnotation: any = {
        id: generateUuid(),
        shapeType: "polygon",
        __type: 0, // 标识为新创建的标注
        data: {
            score: 1,
            color: "#fcffe6",
            ...shapeInfo,
        },
    };
    const newAnnotation = initState.history.concat(rawAnnotation);
    initState.shapes.map((item: any) => {
        item.data.color = "#fcffe6";
    });
    Object.assign(initState, {
        [annotationType]: newAnnotation,
        history: initState.history.concat(rawAnnotation),
        currentAnnotationId: rawAnnotation.id,
    });
};
// 开始画框
const handleBrushStart = () => {
    // 每次开始画框清空当前标注
    Object.assign(initState, {
        currentAnnotationId: "",
    });
};
</script>

<style lang="less">
.home {
    display: flex;
    flex-direction: column;
    align-items: center;
    .img-check-box {
        margin-top: 40px;
        margin-bottom: 20px;
        width: 800px;
        height: 600px;
        position: relative;
        overflow: hidden;
        .work-container{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }
        img {
            width: 100%;
            height: 100%;
            display: block;
        }
    }
}

</style>